<template>
  <div class="mypage-container">
    <!-- 用户头像和邮箱 -->
    <div class="user-header">
      <div class="user-avatar">
        <img v-if="userInfo.avatar" :src="`${BASE_URL}${userInfo.avatar}`" alt="用户头像" class="avatar-img" />
        <el-icon v-else><User /></el-icon>
      </div>
      <div class="user-email">{{ userInfo.email }} <{{ userInfo.surname }}{{ userInfo.name }}></div>
    </div>
    <div class="line"></div>
    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧导航菜单 -->
      <div class="sidebar">
        <div class="menu-item" :class="{ active: activeTab === 'profile' }" @click="activeTab = 'profile'">
          個人概要
        </div>
        <div class="menu-item" :class="{ active: activeTab === 'avatar' }" @click="goToAvatarSetting">
       アバターを設定する
        </div>
        <div class="menu-item" @click="goToPasswordSetting">
       パスワードを変更する
        </div>
      </div>

      <!-- 右侧内容区域 -->
      <div class="content-area">
        <!-- 个人信息表单 -->
        <div v-if="activeTab === 'profile'" class="form-container">
          <div class="form-row">
            <label class="form-label">ユーザー名</label>
            <div class="form-value">{{ userInfo.company_name }}</div>
          </div>
          
          <div class="form-row">
            <label class="form-label">名前</label>
            <div class="form-value">{{ userInfo.surname }}{{ userInfo.name }}</div>
          </div>
          
          <div class="form-row">
            <label class="form-label">Email</label>
            <div class="form-value">{{ userInfo.email }}</div>
          </div>
          
          <div class="form-row">
            <label class="form-label">都道府県</label>
            <div class="form-value">{{ userInfo.prefectures }}</div>
          </div>
          
          <div class="form-row">
            <label class="form-label">国名</label>
            <div class="form-value">日本</div>
          </div>
        </div>

        <!-- 设置头像页面 -->
        <!-- <div v-if="activeTab === 'avatar'" class="avatar-section">
          <div class="user-avatar-container">
            <el-avatar 
              :size="100" 
              :src="userInfo.avatar ? `${BASE_URL}${userInfo.avatar}` : ''"
              :icon="userInfo.avatar ? '' : User"
            ></el-avatar>
            <div class="avatar-upload">
              <el-upload
                class="avatar-uploader"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :http-request="uploadAvatar"
              >
                <el-button type="primary" size="small">修改头像</el-button>
              </el-upload>
            </div>
          </div>
        </div> -->
        
        <!-- 更改密码表单 - 已迁移到独立页面 -->
        <!-- <div v-if="activeTab === 'password'" class="password-container">
          <div class="password-card">
            <h2 class="password-title">パスワードを変更する</h2>
            <el-form 
              ref="passwordFormRef" 
              :model="passwordForm" 
              :rules="passwordRules" 
              class="password-form"
            >
              <div class="form-group">
                <label class="form-label">旧パスワード</label>
                <el-input 
                  v-model="passwordForm.old_password" 
                  type="password" 
                  placeholder=""
                  show-password
                  class="form-input"
                />
              </div>
              
              <div class="form-group">
                <label class="form-label">新パスワード</label>
                <el-input 
                  v-model="passwordForm.now_password" 
                  type="password" 
                  placeholder=""
                  show-password
                  class="form-input"
                />
              </div>
              
              <div class="form-group">
                <label class="form-label">再度パスワードを入力</label>
                <el-input 
                  v-model="passwordForm.renow_password" 
                  type="password" 
                  placeholder=""
                  show-password
                  class="form-input"
                />
              </div>
              
              <div class="form-actions">
                <el-button 
                  type="primary" 
                  :loading="submitting" 
                  @click="submitPasswordChange"
                  class="update-btn"
                >
                  更新
                </el-button>
              </div>
            </el-form>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { User, Setting, Document, UploadFilled } from '@element-plus/icons-vue'
import { ElMessage, ElLoading } from 'element-plus'
import { userApi, commonApi, BASE_URL } from '../../../api/index'
import BankInfo from './BankInfo.vue'
import AccountStats from './AccountStats.vue'

const router = useRouter()

// 当前激活的标签页
const activeTab = ref('profile')
const loading = ref(true)
const uploadLoading = ref(false)

// 用户信息
const userInfo = ref({
  username: '',
  surname: '',
  name: '',
  email: '',
  prefectures: '',
  type: 1,
  credit: 0,
  grow: 0,
  money: '0.00',
  freeze_money: '0.00',
  avatar: ''
})

// 密码相关功能已迁移到独立页面 /user/password

// 获取用户信息
const getUserInfo = async () => {
  try {
    loading.value = true
    const res = await userApi.getBankAccount()
    
    if (res.code === 1 && res.data) {
      console.log(res.data)
      userInfo.value = res.data
    } else {
      ElMessage.warning(res.msg || '获取用户信息失败')
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    ElMessage.error('获取用户信息失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 上传前验证
const beforeAvatarUpload = (file) => {
  // 验证文件类型
  const isImage = ['image/jpeg', 'image/png', 'image/gif', 'image/jpg'].includes(file.type)
  if (!isImage) {
    ElMessage.error('头像只能是图片格式!')
    return false
  }
  
  // 验证文件大小（小于2MB）
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    ElMessage.error('头像大小不能超过2MB!')
    return false
  }
  
  return true
}

// 自定义上传方法
const uploadAvatar = async (options) => {
  try {
    // 显示加载中
    const loadingInstance = ElLoading.service({
      lock: true,
      text: 'アイコンがアップロード中です。',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    
    uploadLoading.value = true
    
    // 上传文件
    const uploadRes = await commonApi.upload(options.file)
    
    if (uploadRes.code === 1 && uploadRes.data) {
      // 更新用户头像信息
      const updateRes = await userApi.updateAvatar({
        avatar: uploadRes.data.url
      })
      
      if (updateRes.code === 1) {
        ElMessage.success('アイコンの変更が成功しました。')
        // 更新本地用户信息
        userInfo.value.avatar = uploadRes.data.url
      } else {
        ElMessage.error(updateRes.msg )
      }
    } else {
      ElMessage.error(uploadRes.msg || 'アイコンのアップロードに失敗しました。')
    }
  } catch (error) {
    console.error('アイコンのアップロードに失敗しました:', error)
    ElMessage.error('アイコンのアップロードに失敗しました。')
  } finally {
    uploadLoading.value = false
    // 关闭加载中
    ElLoading.service().close()
  }
}

// 密码修改相关函数已迁移到独立页面

// 跳转到头像设置页面
const goToAvatarSetting = () => {
  router.push('/user/avatar')
}

// 跳转到密码设置页面
const goToPasswordSetting = () => {
  router.push('/user/password')
}

onMounted(() => {
  getUserInfo()
})
</script>

<style scoped>
.line{
  height: 1px;
  width: 100%;
  background-color: #dbd7d7;
  position: relative;
  top: -20px;
}
.mypage-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #ffffff;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   margin-top: 20px;
}

.user-header {
  margin-top: -20px;
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
}

.user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.user-avatar .el-icon {
  font-size: 30px;
  color: #666;
}

.user-avatar .avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.user-email {
  font-size: 16px;
  color: #333;
}

.main-content {
  display: flex;
  gap: 21px;
  background-color: white;
  /* border-radius: 8px; */
  /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
  overflow: hidden;
  font-size: 12px;
}

.sidebar {
  width: 180px;
  background-color: #4a90e2;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.menu-item {
  margin-top: 30px;
  padding: 15px 20px;
  font-weight: 450;
  color: white;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: background-color 0.3s;
}

.content-area {
  line-height: 0px;
  flex: 1;
  padding: 30px;
  margin-top: 2%;
  margin-left:10%;
}

.form-container {
  max-width: 600px;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.form-label {
  width: 120px;
  font-weight: 500;
  color: #6C757D;
  margin-right: 20px;
}

.form-value {
  text-align: right;
  flex: 1;
  color: #666;
  font-size: 14px;
}

.avatar-section {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.user-avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.avatar-upload {
  margin-top: 10px;
}

/* 密码修改相关样式已迁移到独立页面 /user/password */

/* 响应式调整 */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
  }
  
  .menu-item {
    display: inline-block;
    margin-right: 10px;
    border-bottom: none;
    border-radius: 4px;
    margin-bottom: 5px;
  }
  
  .content-area {
    margin-right: -10px;
    margin-left: -10px;
    padding: 10px;
    line-height: 2px;
  }
  
 
  
  .form-label {
    width: auto;
    margin-bottom: 5px;
    /* margin-right: 0; */
    position: relative;
    /* top: -10%; */
  }
}
</style>